<template>
  <div>
    <div class="tab-cont tab-cont-account !w-full">
      <div class="title">
        <div class="row flexbox flex-align-center flex-justify-between">
          <h1 class="name capitalize">{{ $t('userInfo.personalText') }}</h1>
          <NuxtLink :to="localePath('/userDetail?type=info')">
            <el-button class="btn">{{ $t('formBtn.edit') }}</el-button>
          </NuxtLink>
        </div>
      </div>
      <div class="item-row item-avator flexbox flex-align-center flex-justify-between">
        <div class="flexbox flex-align-center">
          <!-- <img
          class="avator"
          v-if="$globalFn.imgPrefixUrl(userInfo.avatar, '96:96')"
          v-lazy="$globalFn.imgPrefixUrl(userInfo.avatar, '96:96')"
          alt=""
          srcset=""
        /> -->
          <img
            class="avator object-cover flex-none"
            :src="$globalFn.imgPrefixUrl(userInfo.avatar, '96:96')"
            loading="lazy"
            alt="User avatar"
            title="Profile picture"
          />
          <div class="info">
            <div class="name">
              <div class="line-clamp-1 flex">{{ userInfo.nickname }}</div>
            </div>
            <div class="id">
              <span class="text">ID：{{ userInfo.uid }}</span>
            </div>
          </div>
        </div>
        <div class="edit-box">
          <NuxtLink class="edit-btn flexbox flex-align-center" :to="localePath('/userDetail?type=info')">
            <img
              class="icon"
              src="https://cd.sealmg.com/assets/img/mobile/edit-icon.png"
              alt="Edit profile icon"
              title="Edit profile"
              loading="lazy"
            />
            <span class="text whitespace-nowrap">{{ $t('formBtn.edit') }}</span>
          </NuxtLink>
        </div>
      </div>
      <div class="item-row item-email flexbox flex-align-center">
        <div class="flexbox flex-align-center">
          <div class="label one-line capitalize">
            {{ $t('userInfo.emailAddress') }}
          </div>
          <div class="cont flexbox flex-align-center">
            <span class="text">{{ userInfo.email }}</span>
          </div>
        </div>
        <div class="status flexbox flex-align-center">
          <img
            class="icon"
            src="https://cd.sealmg.com/assets/img/email-auth-icon.png"
            alt="Email verification icon"
            title="Email verified"
            loading="lazy"
          />
          <div class="check one-line">{{ $t('userInfo.verified') }}</div>
        </div>
      </div>
      <!-- <div class="item-row flexbox flex-align-center">
        <div class="label one-line">{{ $t("userInfo.phoneNum") }}</div>
        <div class="cont flexbox flex-align-center">
          <span :class="['text', userInfo.mobile ? '' : 'not']">{{
            userInfo.mobile || $t("userInfo.noAdd")
          }}</span>
        </div>
      </div> -->
      <div class="item-row flexbox flex-align-center">
        <div class="label one-line">{{ $t('userInfo.registerTime') }}</div>
        <div class="cont flexbox flex-align-center">
          <span class="text">{{ userInfo.register_time_text || '--' }}</span>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-4 w-full" v-if="0">
      <div class="flex flex-col gap-2">
        <div class="flex justify-between items-center">
          <h1 class="font-medium text-[1.38rem] text-[#141414]">
            {{ $t('userInfo.personalText') }}
          </h1>
          <NuxtLink to="/user/detail" class="font-400 cursor-pointer text-[1rem] text-[#666666] active:scale-90 duration-300">
            {{ $t('formBtn.edit') }}
          </NuxtLink>
        </div>
        <div class="border-t"></div>
      </div>
      <!-- 头像 -->
      <div class="flex gap-4 items-center">
        <div class="w-[6rem] h-[6rem] rounded-full overflow-hidden border">
          <img
            class="size-full object-cover"
            v-lazy="$globalFn.imgPrefixUrl(userInfo.avatar, '96:96')"
            loading="lazy"
            alt="User profile picture"
            title="User avatar"
          />
        </div>
        <div class="flex flex-col gap-2">
          <div class="font-medium text-[1.25rem] text-[#141414]">
            {{ userInfo.nickname }}
          </div>
          <div class="inline-flex">
            <div class="px-3 flex items-center justify-center rounded-[0.25rem] border-[0.06rem] border-solid border-[#FF967B]">
              <span class="font-medium text-[0.75rem] text-[#FF4E33]"> ID： {{ userInfo.uid }} </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 邮箱地址 -->
      <div class="flex gap-6 items-center py-3">
        <div class="font-400 text-[1rem] text-[#999999]">
          {{ $t('userInfo.emailAddress') }}
        </div>
        <div class="font-medium text-[1rem] text-[#262626]">
          {{ userInfo.email }}
        </div>
        <div class="flex gap-1 items-center">
          <img
            class="size-[1.5rem]"
            src="https://cd.sealmg.com/assets/img/email-auth-icon.png"
            alt="Email verification status"
            title="Email verified status"
            loading="lazy"
          />
          <div class="text-[0.75rem] text-[#1677FF]">
            {{ $t('userInfo.verified') }}
          </div>
        </div>
      </div>
      <!-- 手机号码 -->
      <div class="flex gap-6 items-center py-3">
        <div class="font-400 text-[1rem] text-[#999999]">手机号码</div>
        <div class="font-medium text-[1rem] text-[#262626]">9999999999</div>
      </div>
      <!-- 注册时间 -->
      <div class="flex gap-6 items-center py-3">
        <div class="font-400 text-[1rem] text-[#999999]">
          {{ $t('userInfo.registerTime') }}
        </div>
        <div class="font-medium text-[1rem] text-[#262626]">
          {{ userInfo.register_time_text || '--' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {}
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo || {}
      }
    },
    created() {
      if (!this.$cookies.get('token')) {
        this.$router.push({
          path: this.localePath('/login')
        })
      }
      this.$store.dispatch('user/getUserInfo')
    },
    methods: {
      userDetail() {}
    }
  }
</script>
<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    padding: 20px 24px 12px 24px;
    .row {
      padding-bottom: 8px;
      border-bottom: @border-1-fo;
    }
    .name {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
    .btn {
      box-sizing: border-box;
      padding: 0;
      // width: 58px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      padding: 0 16px;
      color: @font-color-26;
      border-radius: 25px;
      border: none;
    }
  }
  .item-row.item-avator {
    margin-top: 24px;
    margin-bottom: 24px;
    height: 96px;
    .avator {
      width: 96px;
      height: 96px;
      border-radius: 50%;
    }
    .info {
      margin-left: 16px;
      .name {
        font-weight: 500;
        font-size: 20px;
        color: @font-color-14;
      }
      .id {
        margin-top: 11px;
        .text {
          font-family: HelveticaNeue, HelveticaNeue;
          font-weight: 500;
          font-size: 12px;
          color: @theme-color;
          padding: 2px 8px;
          border-radius: 4px;
          border: 1px solid #ff967b;
        }
      }
    }
    .edit-box {
      display: none;
    }
  }
  .item-row {
    margin-bottom: 16px;
    padding: 0px 24px;
    height: 48px;
    .label {
      padding: 0 16px;
      box-sizing: border-box;
      font-weight: 500;
      font-size: 14px;
      color: #b3b3b3;
      min-width: 96px;
    }
    .cont {
      margin-left: 20px;
      padding: 0 16px;
      height: 48px;
      .text {
        font-weight: 500;
        font-size: 14px;
        color: @font-color-14;
      }
      .text.not {
        color: #b3b3b3;
      }
    }
  }
  .item-email {
    .status {
      margin-left: 16px;
      .icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
      }
      .check {
        margin-left: 2px;
        font-weight: 500;
        font-size: 12px;
        color: #1677ff;
      }
    }
  }
  .tab-cont {
    width: 100%;
    margin-top: 8px;
  }
  .tab-cont-account {
    width: 590px;
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
      .btn {
        display: none;
      }
    }
    .item-row.item-avator {
      padding: 0 16px;
      margin-top: 16px;
      margin-bottom: 0px;
      height: 72px;
      .avator {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
      .info {
        margin-left: 8px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .id {
          margin-top: 5px;
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
            padding: 0;
            border-radius: 0;
            border: none;
          }
        }
      }
      .edit-box {
        display: block;
        .edit-btn {
          padding: 0 8px;
          height: 28px;
          background: @color-f7;
          border-radius: 8px;
          cursor: pointer;
          .icon {
            width: 16px;
            height: 16px;
          }
          .text {
            margin-left: 4px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
          }
        }
      }
    }
    .item-row {
      margin-bottom: 0px;
      padding: 0px 16px;
      height: 48px;
      .label {
        padding: 0;
        font-weight: 500;
        font-size: 14px;
        color: #b3b3b3;
        min-width: 56px;
      }
      .cont {
        margin-left: 20px;
        padding: 0;
        height: 48px;
        .text {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-26;
        }
        .text.not {
          color: #b3b3b3;
        }
      }
    }
    .item-email {
      justify-content: space-between;
      .status {
        margin-left: 16px;
        .icon {
          width: 24px;
          height: 24px;
          border-radius: 6px;
        }
        .check {
          margin-left: 4px;
          font-weight: 500;
          font-size: 12px;
          color: #1677ff;
        }
      }
    }
    .tab-cont {
      width: 100%;
      margin-bottom: 48px;
    }
    .tab-cont-account {
      width: 100%;
    }
  }
  @media screen and (max-width: 767px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
      .btn {
        display: none;
      }
    }
    .item-row.item-avator {
      padding: 0 16px;
      margin-top: 16px;
      margin-bottom: 0px;
      height: 72px;
      .avator {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
      .info {
        margin-left: 8px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .id {
          margin-top: 5px;
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
            padding: 0;
            border-radius: 0;
            border: none;
          }
        }
      }
      .edit-box {
        display: block;
        .edit-btn {
          padding: 0 8px;
          height: 28px;
          background: @color-f7;
          border-radius: 8px;
          cursor: pointer;
          .icon {
            width: 16px;
            height: 16px;
          }
          .text {
            margin-left: 4px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
          }
        }
      }
    }
    .item-row {
      margin-bottom: 0px;
      padding: 0px 16px;
      height: 48px;
      .label {
        padding: 0;
        font-weight: 500;
        font-size: 14px;
        color: #b3b3b3;
        min-width: 56px;
        max-width: 60px;
      }
      .cont {
        margin-left: 20px;
        padding: 0;
        height: 48px;
        .text {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-26;
        }
        .text.not {
          color: #b3b3b3;
        }
      }
    }
    .item-email {
      justify-content: space-between;
      .status {
        margin-left: 16px;
        .icon {
          width: 24px;
          height: 24px;
          border-radius: 6px;
        }
        .check {
          max-width: 60px;
          margin-left: 4px;
          font-weight: 500;
          font-size: 12px;
          color: #1677ff;
        }
      }
    }
    .tab-cont {
      width: 100%;
      margin-bottom: 48px;
    }
    .tab-cont-account {
      width: 100%;
    }
  }
</style>
